<template>
    <section class="index">
      <div class="topTitle blue getTop">
        <span class="goBack" @click="goBack"><i></i></span>
        文章详情
      </div>

       <div class="newShow">
          <div class="info">
            <p class="title">{{showData.title}}</p>
             <p class="time">{{showData.updated_at}}</p>
             <div class="txtle" v-html="showData.content"></div>
             <p class="clickBox">
               <span v-if="showData.me_is_like==false" @click="clickZan" class="zan"><i></i>点赞</span>
               <span v-else class="zan on"><i></i>已点赞</span>
               <span @click="clickLike" class="notLike"><i></i>不喜欢</span>
             </p>
          </div>
         <div class="moreNew">
            <p class="title"><i class="left"></i>更多推荐内容<i class="right"></i></p>
            <ul>
              <li @click="goNew(item.id)" v-for="item in showList"><img :src="item.res">{{item.title}}</li>
            </ul>
         </div>

         <div class="sayList">
            <p class="top"><i></i>{{txtNum}}</p>
           <ul>
             <li v-for="item in txtleData">
               <img :src="item.user.avatar" alt="">
               <p class="p1">{{item.user.nickname}} <span>{{item.created_at}}</span></p>
               <p class="p3">{{item.content}}</p>
             </li>
           </ul>
         </div>

         <div class="sayBox">
            <i></i>
           <input type="text" v-model="txtle" name="">
           <span @click="postText" class="click">评论</span>
         </div>

       </div>
    </section>
    
</template>

<script>
import {Get,Post,Delete} from '@/config/api.js'

export default {
  name: 'Home',
  data () {
    return {
      txtle:'',
      txtleData:[],
      txtNum:0,
      showData:'',
      showList:[],
      loadStatic:true,//加载状态
      onPage:1,//当前页面
      allDataPage:'',//总页数
    }
  },
  mounted(){
      this.getData(this.$route.query.id)
      this.getDataMore()
      this.getText(1)
      this.getSet()
  },
  watch:{
    '$route.query.id'(){
      this.getData(this.$route.query.id)
    }
  },
  methods:{
    //返回上一页
    goBack(){
      this.$router.push({ path: '/newList'})
    },
    //获取文章详情
    async getData(id){
        await Get('/article/'+id,this.$store.state.token).then((res)=>{
          this.showData=res.data
        })
    },
    //获取推荐文章
    async getDataMore(){
        await Get('/article?is_recommend=2&_per_page=3',this.$store.state.token).then((res)=>{
          this.showList=res.data
        })
    },
    //评论
    async postText(){
      let data={
        "article_id":this.$route.query.id,
        "content":this.txtle
      }
      await Post('/article/comment',this.$store.state.token,data).then((res)=>{
        this.txtle=''
        this.getText(1)
      })
    },
    //获取评论
    async getText(num){
      await Get('/article/comment?_include=user&article_id='+this.$route.query.id+'&page='+num,this.$store.state.token).then((res)=>{
        console.log(res)
        //this.txtleData=res.data
        this.txtleData.push(...res.data)
        this.txtNum=res.meta.pagination.total
        this.allDataPage=res.meta.pagination.total_pages
      })
    },
    //去详情页
    goNew(id){
      console.log(id)
      this.$router.push({ path: '/newShow',query: { id: id }})
    },
    async clickZan(){
      let data={
        article_id:this.$route.query.id
      }
      await Post('/article/like',this.$store.state.token,data).then(()=>{
          this.showData.me_is_like=true
          let data={
            static:true,
            txt:{
              type:2,
              message:"点赞成功!"
            }
          }
          this.$store.dispatch("alert",data)
          setTimeout(() => {
            this.$store.dispatch("alertClose")
          }, 1000)
      })
    },
    clickLike(){
        let data={
            static:true,
            txt:{
              type:2,
              message:"提交成功!"
            }
          }
          this.$store.dispatch("alert",data)
          setTimeout(() => {
            this.$store.dispatch("alertClose")
          }, 1000)
    },

  //下拉加载更多
    getSet(){
      let that=this
      $(window).scroll(function(){ 
          var h=$(document.body).height();//网页文档的高度 
          var c = $(document).scrollTop();//滚动条距离网页顶部的高度 
          var wh = $(window).height(); //页面可视化区域高度
           if (Math.ceil(wh+c)>=h){ 
              if(that.onPage<that.allDataPage){
                that.onPage++
                that.getText(that.onPage)
              }else{
                that.loadStatic=false
              }
          } 
      }) 
    },
    shopSet(){
      $(window).unbind('scroll');
    }


  },
  beforeDestroy(){
    this.shopSet()
  }
}
</script>


